"use client"
import React from "react"
import { AppBar, Toolbar, Typography, Select, MenuItem, IconButton, Box, Container, Paper, FormControl, InputLabel } from "@mui/material"
import { Settings as SettingsIcon, Help as HelpIcon } from "@mui/icons-material"
import { SelectChangeEvent } from "@mui/material/Select"
import useAppStore, { ApiProvider, DeepSeekModel } from "@/store/useAppStore"
import ConversationPanel from "./ConversationPanel"
import ChatInput from "./ChatInput"
import HtmlPreviewSidebar from "./HtmlPreviewSidebar"

export default function MainLayout() {
	const { selectedApi, setSelectedApi, selectedDeepSeekModel, setSelectedDeepSeekModel } = useAppStore()

	const handleApiChange = (event: SelectChangeEvent<unknown>) => {
		setSelectedApi(event.target.value as ApiProvider)
	}

	const handleDeepSeekModelChange = (event: SelectChangeEvent<unknown>) => {
		setSelectedDeepSeekModel(event.target.value as DeepSeekModel)
	}

	return (
		<Box
			sx={{
				flexGrow: 1,
				height: "100vh",
				display: "flex",
				flexDirection: "column",
				bgcolor: "grey.100" // 使用稍深的灰色背景，增加对比度
			}}
		>
			{/* 顶部工具栏 */}
			<AppBar
				position='static'
				elevation={1}
				sx={{
					bgcolor: "background.paper", // 使用纯白背景
					borderBottom: "1px solid",
					borderColor: "divider",
					color: "text.primary"
				}}
			>
				<Toolbar>
					<Typography variant='h6' component='div' sx={{ flexGrow: 1, fontWeight: 700 }}>
						AI 对话式排版助手
					</Typography>

					{/* AI 服务商选择器 */}
					<Select value={selectedApi} onChange={handleApiChange} size='small' sx={{ mr: 2, minWidth: 120 }}>
						<MenuItem value='Deepseek'>Deepseek</MenuItem>
						{/* <MenuItem value='SiliconFlow'>硅基流动</MenuItem> */}
					</Select>

					{/* DeepSeek 模型选择器 */}
					{selectedApi === "Deepseek" && (
						<Select value={selectedDeepSeekModel} onChange={handleDeepSeekModelChange} size='small' sx={{ mr: 2, minWidth: 140 }}>
							<MenuItem value='deepseek-chat'>对话模式</MenuItem>
							<MenuItem value='deepseek-reasoner'>思考模式</MenuItem>
						</Select>
					)}

					<IconButton color='inherit'>
						<SettingsIcon />
					</IconButton>
					<IconButton color='inherit'>
						<HelpIcon />
					</IconButton>
				</Toolbar>
			</AppBar>

			{/* 主内容区域 - 对话界面 */}
			<Container
				maxWidth='lg'
				sx={{
					flexGrow: 1,
					display: "flex",
					flexDirection: "column",
					py: { xs: 0.5, sm: 1 }, // 大幅减少垂直内边距
					px: { xs: 1, sm: 2 }, // 移动端减少水平内边距
					height: "calc(100% - 64px)"
				}}
			>
				<Box sx={{ display: "flex", gap: 2, height: "100%" }}>
					{/* 主对话区域 */}
					<Paper
						elevation={3}
						sx={{
							flexGrow: 1,
							display: "flex",
							flexDirection: "column",
							overflow: "hidden",
							borderRadius: { xs: 1, sm: 2 }, // 移动端使用更小的圆角
							bgcolor: "background.paper",
							border: "1px solid",
							borderColor: "grey.200" // 添加边框增强边界感
						}}
					>
						{/* 对话历史 */}
						<ConversationPanel />

						{/* 输入框 */}
						<ChatInput />
					</Paper>
				</Box>
			</Container>

			{/* HTML预览侧栏 */}
			<HtmlPreviewSidebar />
		</Box>
	)
}
